<script setup name="App" lang="ts">
import { ref } from 'vue'

// const money = ref<number>(10)
// const money = ref(10)

// 默认是空数组
// 这样写，后面对 todos.value 赋值会报错
// const todos = ref([])
// 如果给数组指定了初始值，其实它是具有类型推断的能力的，后面就能正常赋值对应的数据了，但是这样不好，我怎么知道初始写什么合适呢
// const todos = ref([{ id: 1, name: 'xxx', done: false }])
// 泛型参数规定的就是初始值的类型
// const todos = ref<{ id: number; name: string; done: boolean }[]>([])

interface IItem {
  id: number
  name: string
  done: boolean
}
/* type IItem = {
  id: number
  name: string
  done: boolean
} */
const todos = ref<IItem[]>([])

setTimeout(() => {
  todos.value = [
    { id: 1, name: '吃饭', done: false },
    { id: 2, name: '睡觉', done: true },
  ]
}, 1000)
</script>
<template>
  <div>
    <ul>
      <li v-for="item in todos" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
